<template>
  <div>
    <div class="header">
      <div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
        确认订单
        <div class="null"></div>
      </div>
      <div class="header-null"></div>
      <div class="order-address" @click="route('address')">
        <div class="order-address-img">
          <i class="iconfont icon-weizhi location"></i>
        </div>
        <!--   <div class="order-address-content">
          <div class="order-address-content-top">
            <div class="order-address-content-top-title">收货人:张先生</div>
            <div class="order-address-content-top-phone">
               <img src="../../static/img/icon/my_icon/receivingtelephone@2x.png"/>
              <div>tel:13523450460</div>
            </div>
          </div>
          <div class="order-address-content-bottom">
            收货地址：河南省洛阳市王城公园对面中州国际
          </div>
        </div> -->
        <!-- 收货信息 -->
        <div class="order-address-content" v-if="info.consignee">
          <div class="order-address-content-top">
            <div class="order-address-content-top-title">收货人：{{info.consignee}}</div>
            <div class="order-address-content-top-phone">
              <img src="../../static/img/icon/my_icon/receivingtelephone@2x.png"/>
              <div>{{info.contactWay}}</div>
            </div>
          </div>
          <div class="order-address-content-bottom">
            收货地址：{{info.province}}{{info.city == info.province? '':info.city}}{{info.district}}{{info.contactAddress}}
          </div>
        </div>
        <div class="order-address-content" v-else>
          请填写收货信息
        </div>
        <div class="order-address-right">
          <img src="../../static/img/icon/my_icon/arrow@2x.png"/>
        </div>
        </div>
       <!-- <div class="order-list">
          <div class="title">
            <img src="../../static/img/icon/my_icon/merchant@3x.png"/>
                 王小二的店
            <img src="../../static/img/icon/my_icon/arrow@3x.png"/>
              </div>
            <div class="order-list-item">
              <div>
                <img  src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg"/>
                </div>
                <div class="right">
                  <div class="order-list-item-title">
                    大盘鸡
                  </div>
                  <div class="order-list-type">
                    美味的大盘鸡让你忘记辛苦的烦恼
                  </div>
                  <div class="order-list-bottom">
                    <div class="order-list-num-left">
                      ￥99.99
                    </div>
                    <div class="order-list-num-right">
                      x3
                    </div>
                  </div>
                </div>
              </div>
              <div class="order-more-total-item">
                <div>商品总价</div>
                <div>￥100</div>
              </div>
              <div class="order-more-total-item">
                <div>满减</div>
                <div>-￥10</div>
              </div>
              <div class="order-more-total-item">
                <div>优惠券</div>
                <div>-￥20</div>
              </div>
             <div class="order-more-total-item">
              <div></div>
                    <div><span>共1件商品&nbsp;&nbsp;&nbsp;小计：</span><span>￥</span><span>100</span></div>
             </div> 
            </div>-->
         <!--    <div class="type" style="padding-left:15px;">支付方式</div>
            <div class="order-row">
              <div class="payBox">
                <i style="color:#51B440;font-size:26px;" class="iconfont icon-weixin"></i>
                <div>&nbsp;&nbsp;微信支付</div>
              </div>
              <div>
                <Radio v-model="single.n1"></Radio>
              </div>
            </div>
            <div class="order-row">
              <div class="payBox">
                <i style="font-size:26px;color: #07ABEF;" class="iconfont icon-zhifubao"></i>
                <div>&nbsp;&nbsp;支付宝支付</div>
              </div>
              <div>
                <Radio v-model="single.n2"></Radio>
              </div>
            </div>
            <div class="order-row">
              <div class="payBox">
                <i style="color:#51B440;font-size:28px;" class="iconfont icon-qianqianqian"></i>
                <div>&nbsp;&nbsp;账户余额</div>
              </div>
              <div>
                <Radio v-model="single.n3"></Radio>
              </div>
            </div>
            <div class="order-row">
              <div class="payBox">
                <i style="color:#51B440;font-size:29px;" class="iconfont icon-daifukuansel"></i>
                <div>&nbsp;&nbsp;货到付款</div>
              </div>
              <div>
                <Radio v-model="single.n4"></Radio>
              </div>
            </div> -->
            <!-- 商品 -->
            <div class="order-list" v-for="i in list" v-if="$route.query.type != 'shop'">
              <div class="title">
                <img src="../../static/img/icon/my_icon/merchant@3x.png"/>
        {{i.createName}}
                <img src="../../static/img/icon/my_icon/arrow@3x.png"/>
      </div>
                <div class="order-list-item" v-for="(item, index) in i.shoppingList">
                  <div>
                    <img  src="https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg"/>
        </div>
                    <div class="right">
                      <div class="order-list-item-title">
                        {{item.commodityName}}
                      </div>
                      <div class="order-list-type">
                        {{item.attributeName}}：{{item.sortName}}
                      </div>
                      <div class="order-list-bottom">
                        <div class="order-list-num-left">
                          ￥{{item.sortPrice}}
                        </div>
                        <div class="order-list-num-right">
                          x{{item.buyCount}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="order-more-total-item">
                    <div>快递运费</div>
                    <div>{{i.expressFee == 0 ?'免邮':i.expressFee}}</div>
                  </div>
                  <div class="order-more-total-item">
                    <div></div>
                    <div><span>共{{i.shoppingList.length}}件商品&nbsp;&nbsp;&nbsp;小计：</span><span>￥</span><span>{{i.xiaoji}}</span></div>
                  </div>
                </div>
                <div class="order-list" v-else>
                  <div class="order-list-item" v-for="(item, index) in list">
                    <div>
                      <img :src="item.titleUrl.split(',')[0]"/>
        </div>
                      <div class="right">
                        <div class="order-list-item-title">
                          {{item.commodityName}}
                        </div>
                        <div class="order-list-type">
                          {{item.attributeName}}：{{item.sortName}}
                        </div>
                        <div class="order-list-bottom">
                          <div class="order-list-num-left">
                            ￥{{item.sortPrice}}
                          </div>
                          <div class="order-list-num-right">
                            x{{item.buyCount}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="order-row" v-if="$route.query.type != 'shop'" @click="couponShow = true">
                    <div>使用优惠券</div>
                    <div>
                      <div v-if="Object.keys(couponInfo).length == 0">暂无优惠券</div>
                      <div v-else>{{couponInfo.couponsType == 1 ? '￥' + couponInfo.reduceMoney : '打' + couponInfo.discount + '折'}}</div>
                      <img src="../../static/img/icon/my_icon/arrow@2x.png"/>
      </div>
                    </div>
                    <!--   <div class="type" style="padding-left:15px;">配送方式</div>
            <div class="order-row">
              <div class="payBox">
                <i style="font-size:29px;" class="iconfont icon-buhang"></i>
                <div>&nbsp;&nbsp;自取</div>
              </div>
              <div>
                <Radio v-model="single.n1"></Radio>
              </div>
            </div>
            <div class="order-row">
              <div class="payBox">
                <i style="font-size: 28px;" class="iconfont icon-kuaidixiaoge"></i>
                <div>&nbsp;&nbsp;普通快递</div>
              </div>
              <div>
                <Radio v-model="single.n1"></Radio>
              </div>
            </div>
            <div class="order-more-total" v-if="$route.query.type == 'shop'">
              <div class="order-more-total-item">
                <div>快递运费</div>
                <div>{{newInfo.expressFee == 0 ?'免邮':newInfo.expressFee}}</div>
              </div>
              <div class="order-more-total-item">
                <div>使用优惠券</div>
                <div @click="couponShow = true">
                  <div v-if="Object.keys(couponInfo).length == 0">暂无优惠券</div>
                  <div v-else>{{couponInfo.couponsType == 1 ? '￥' + couponInfo.reduceMoney : '打' + couponInfo.discount + '折'}}</div>
                  <img src="../../static/img/icon/my_icon/arrow@2x.png"/>
             </div>
                </div>
                <div class="order-more-total-item">
                  <div></div>
                  <div>
                    <span>共{{newList.length}}件商品&nbsp;&nbsp;&nbsp;合计：</span>
                    <span>￥</span>
                    <span>99.99</span>
              
                  </div>
                </div>
                <div class="order-more-total-item" style="margin-top: 10px;">
                  <div>匿名购买</div>
                  <div @click="check = !check">
                    <img src="../../static/img/icon/release_icon/weixuanzhong@3x.png" class="check" v-if="!check" alt="" />
                    <img src="../../static/img/icon/release_icon/xuanzhong@3x.png" class="check" v-else alt="" />
             </div>
            </div>
           </div> -->
                    <div class="order-row" style="margin-top: 10px;" v-if="$route.query.type != 'shop'">
                      <div>匿名购买</div>
                      <div @click="check = !check">
                        <img src="../../static/img/icon/release_icon/weixuanzhong@3x.png" class="check" v-if="!check" alt="" />
                        <img src="../../static/img/icon/release_icon/xuanzhong@3x.png" class="check" v-else alt="" />
                 </div>
                      </div>
                      <div class="order-fixed-null"></div>
                      <div class="order-fixed">
                        <div>合计：<span>￥{{total}}</span></div>
                        <div @click="submit">
                          提交订单
                        </div>
                      </div>
                      <coupon-more :type="2" title="可使用的优惠券" :dialog="couponShow" :list="couponList" @receive="receive" @hide="couponShow = false"></coupon-more>
                    </div>
</template>
<script>
import { getData } from '../service/getData';
import couponMore from '../base/couponMoreMask';
import { Radio, RadioGroup, Icon } from 'iview';
export default {
  components: {
    couponMore,
    Radio,
    RadioGroup,
    Icon
  },
  data() {
    return {
      check1: false,
      check2: false,
      single: {
        n1: true,
        n2: false,
        n3: false,
        n4: false
      },
      list: [],
      couponList: [],
      info: {},
      shopInfo: {},
      check: false,
      couponShow: false,
      newList: [],
      couponInfo: {},
      newInfo: {},

    }
  },
  methods: {
    init() { //默认加载
      if (this.$route.query.type == 'shop') {

        this.shopInfo = JSON.parse(this.$route.query.id);

        getData('/shoppingtrolley/buyNowApi', {
          buyCount: this.shopInfo.num,
          userId: sessionStorage.userId,
          CommodityID: this.shopInfo.id,
          CommoditySortID: this.shopInfo.CommoditySortID
        }).then(d => {
          alert(d);
          console.log(d);
          this.info = d.addressDefault
          d.commodity.buyCount = d.buyCount
          d.commodity.sortPrice = d.commoditySort.sortPrice
          d.commodity.sortName = d.commoditySort.sortName
          d.commodity.attributeName = d.commoditySort.attributeName
          this.list.push(d.commodity)
          this.newList.push(d.commodity)
          this.newInfo = d.commodity
          this.buyCount = d.buyCount
          this.couponList = d.applicableCoupon
        })
      } else {
        getData('/shoppingtrolley/settlementInterfaceApi', {
          userId: sessionStorage.userId,
          shoppingIds: localStorage.shoppingIds
        }).then(d => {
          console.log(d);
          if (d.addressDefault) {
            this.info = d.addressDefault
          }
          this.list = d.groupByList
          this.couponList = d.applicableCoupon
          let _this = this
          this.list.map(x => {
            x.shoppingList.map(i => {
              if (i.expressFee < (i + 1).expressFee) {
                x.expressFee = (i + 1).expressFee
              } else {
                x.expressFee = i.expressFee
              }
              _this.newList.push(i)
            })
          })
        })
      }
    },
    receive(obj) { //使用优惠券
      this.couponInfo = obj
      this.couponShow = false
    },
    submit() { //确认订单
      this.$store.state.isLoading = true
      if (Object.keys(this.info).length == 0) {
        this.$store.state.isLoading = false
        alert('请添加收货地址')
        return false
        this.route('index')
      }
      if (this.$route.query.type == 'shop') {
        getData('/orders/submitOrderApi', {
          submitType: 2,
          userId: sessionStorage.userId,
          UserAddressID: this.info.UserAddressID,
          CommodityID: this.shopInfo.id,
          CommoditySortID: this.shopInfo.CommoditySortID,
          buyCount: this.shopInfo.num,
          isAnonymity: this.check ? 1 : 0,
          CouponsID: this.couponInfo.CouponsID
        }).then(d => {
          this.$store.state.isLoading = false
          if (d.code == 1) {
            alert(d.payNo);
            this.route('orderDetail', '', 'shop', d.payNo)
          } else if (d.code == 0) {
            console.log(d.msg)
          }
        }).catch(err => {
          this.$store.state.isLoading = false
          console.log(err)
        })
      } else {
        let ids = []
        this.newList.map(x => {
          ids.push(x.ShoppingTrolleyID)
        })
        getData('/orders/submitOrderApi', {
          submitType: 1,
          userId: sessionStorage.userId,
          UserAddressID: this.info.UserAddressID,
          shoppingIds: ids.join(),
          isAnonymity: this.check ? 1 : 0,
          CouponsID: this.couponInfo.CouponsID
        }).then(d => {
          this.$store.state.isLoading = false
          if (d.code == 1) {
            this.route('orderDetail', '', '', d.payNo)
          } else if (d.code == 0) {
            //  alert(d.msg)
          }
        }).catch(err => {
          this.$store.state.isLoading = false
          console.log(err)
        })
      }
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    expressFee() {
      var total = 0
      var obj = {}
      var arr = []
      for (let i = 0; i < this.newList.length; i++) {
        if (!obj[this.newList[i].id]) {
          arr.push(this.newList[i]);
          obj[this.newList[i].id] = true;
        }
      }
      arr.map(x => {
        total += x.expressFee
      })
      return total
    },
    total() { //计算合计
      if (this.$route.query.type == 'shop') {
        if (Object.keys(this.couponInfo).length != 0) {
          if (this.couponInfo.couponsType == 1) {
            return this.newInfo.sortPrice * this.buyCount - this.couponInfo.reduceMoney
          } else {
            return this.newInfo.sortPrice * this.buyCount * (this.couponInfo.discount / 10)
          }
        } else {
          return this.newInfo.sortPrice * this.buyCount
        }
      } else {
        let total = 0
        this.list.map(x => {
          total += x.xiaoji
        })
        total -= this.expressFee
        if (Object.keys(this.couponInfo).length != 0) {
          if (this.couponInfo.couponsType == 1) {
            return total - this.couponInfo.reduceMoney
          } else {
            var num = this.couponInfo.discount / 10
            let result = Math.round((total * num) * 100) / 100

            return result
          }
        } else {
          return total
        }
      }
    }
  }
}

</script>
<style scoped lang="less">
.payBox {
  display: flex;
  justify-content: middle;
}

.location {
  font-size: 26px;
}

.order-address {
  margin-bottom: 10px;
  padding: 10px 0;
  display: flex;
  font-size: 12px;
  align-items: center;
  background: #FFFFFF;
  justify-content: space-between;

  .order-address-img {

    margin: 0 10px;

    img {
      width: 20px;
      height: 20px;
    }
  }

  .order-address-content {
    flex: 1;

    .order-address-content-top {
      display: flex;
      justify-content: space-between;
      flex: 2;
      line-height: 35px;

      .order-address-content-top-title {}

      .order-address-content-top-phone {
        display: flex;
        align-items: center;
        flex: 4;
        margin-left: 10px;

        img {
          width: 15px !important;
          height: 15px !important;
          margin-right: 5px;
        }
      }
    }

    .order-address-content-bottom {
      line-height: 16px;
    }
  }

  .order-address-right {
    margin: 0 15px;


    img {
      width: 10px;
      height: 15px;
    }
  }
}

.order-list {
  margin-bottom: 10px;

  .title {
    padding: 10px 15px 10px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    background: #fff;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
      margin-right: 20px;

      &:last-child {
        width: 8px;
        height: 12px;
        margin-left: 20px;
      }
    }
  }

  .order-list-item {
    padding: 10px 20px;
    display: flex;
    border-bottom: 1px solid #E5E5E5;
    background: #fff;

    img {
      width: 90px;
      height: 85px;
      margin-right: 10px;
    }

    .right {
      flex: 1;
    }

    div {
      font-size: 12px;
      position: relative;

      &:nth-child(2) {
        position: relative;
      }

      .order-list-item-title {
        display: -webkit-box;
        word-break: break-all;
        text-overflow: ellipsis;
        font-size: 32rpx;
        overflow: hidden;
        margin-bottom: 5px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        padding-right: 30px;
      }

      .order-list-type {
        color: #7b7b7b;
      }

      .order-list-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;

        .order-list-num-left {
          color: #c9eb59;
          font-size: 13px;
        }

        .order-list-num-right {}
      }
    }

  }

  .order-more-total-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 10px 15px;

    div:nth-child(2) {
      display: flex;
      align-items: center;
      color: #FF1E1E;

      img {
        margin-left: 10px;
        width: 10px;
        height: 15px;
      }

      .check {
        width: 15px;
        height: 15px;
      }

      span:nth-child(3) {
        color: red;
        display: flex;
        align-items: center;
        font-weight: bold;
        /*font-size: 15px;*/
      }
    }
  }
}

.order-more-total {
  margin-bottom: 10px;

  .order-more-total-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 10px 15px;

    div:nth-child(2) {
      display: flex;
      align-items: center;

      img {
        margin-left: 10px;
        width: 10px;
        height: 15px;
      }

      .check {
        width: 15px;
        height: 15px;
      }

      span:nth-child(3) {
        color: red;
        display: flex;
        align-items: center;
        font-weight: bold;
        /*font-size: 15px;*/
      }
    }
  }
}

.order-payment {
  font-size: 12px;
  margin-bottom: 10px;

  .order-payment-item {
    padding: 5px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    div:nth-child(1) {
      display: flex;
      align-items: center;

      img {
        margin-right: 10px;
        width: 35px;
        height: 35px;
      }
    }

    div:nth-child(2) {
      display: flex;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}

.order-fixed-null {
  height: 51px;
  width: 100%;

}

.order-fixed {
  position: fixed;
  border-top: 1px solid #eee;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding-left: 10px;

  div:first-child {

    span {
      color: red;
      font-weight: bold;
    }
  }

  div:nth-child(2) {
    background: #BCE211;
    padding: 10px 30px;
    color: #fff;
  }
}

.order-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px solid #eee;
  background: #fff;
  padding: 5px 15px;

  div:nth-child(2) {
    display: flex;
    align-items: center;

    img {
      margin-left: 10px;
      width: 10px;
      height: 15px;
    }

    .check {
      width: 15px;
      height: 15px;
    }

    span:nth-child(3) {
      color: red;
      display: flex;
      align-items: center;
      font-weight: bold;
      /*font-size: 15px;*/
    }
  }
}

</style>
